/* 每条视频之间加分隔线 */
.dy-row + .dy-row { border-top: 1px solid #eee; }

/* 视频缩略图 */
.dy-thumb {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  background: #f5f5f5;
}

/* 元信息 */
.dy-meta {
  color: #666;
  font-size: .9rem;
}

/* 操作按钮 */
.dy-actions .btn {
  padding: .25rem .6rem;
  border-radius: 18px;
  font-size: .85rem;
}

/* ===== 抖音页：布局兜底，避免“表单贴着页脚”且可滚动触发悬浮窗 ===== */

/* 让页面至少和视口一样高，并把 footer 固定在底部（内容少时不顶上来） */
/*html, body { height: 100%; }*/
/*body { display: flex; flex-direction: column; }*/

/* 主内容区扩展为“可伸缩”，并增加上下留白（避免和页脚贴一起）*/
/*main {*/
/*  flex: 1 0 auto;           !* 占据剩余空间 *!*/
/*  padding-top: 1rem;*/
/*  padding-bottom: 6rem;     !* 给页脚留出呼吸空间 *!*/
/*  min-height: 120vh;        !* 内容少时也能产生一点滚动，用于触发悬浮窗 *!*/
/*}*/

/*!* 页脚不被挤压（固定在底部） *!*/
/*.footer { flex-shrink: 0; }*/

/*!* 表单卡片再加点下间距（双保险） *!*/
/*.card.mb-3 { margin-bottom: 2rem !important; }*/

/* !*结果列表的触感优化（可选） *!*/
/*.list-group-item.dy-row:hover {*/
/*  background: #fafafa;*/
/*}*/

/* 居中“英雄”表单区域 */
.dy-hero {
  margin-top: 1rem;
  margin-bottom: .5rem;
}
.dy-hero-card {
  border: 1px solid #eaeaea;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  backdrop-filter: blur(2px);
}

/* 装饰图：在窄屏自适应、不挤压内容 */
.dy-deco-img {
  max-height: 160px;
  object-fit: contain;
  opacity: .95;
}

/* 输入组尺寸优化（已用 input-group-lg，这里做些细节） */
.input-group-lg > .form-control {
  padding-top: .9rem;
  padding-bottom: .9rem;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.input-group-lg > .btn {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* 结果列表原有样式保留（若已存在可忽略） */
.dy-row + .dy-row { border-top: 1px solid #eee; }
.dy-thumb { width: 80px; height: 60px; object-fit: cover; border-radius: 6px; background: #f5f5f5; }
.dy-meta { color:#666; font-size: .9rem; }
.dy-actions .btn { padding: .25rem .6rem; border-radius: 18px; font-size: .85rem; }

/* 给页面一些呼吸感，避免表单贴着页脚，同时保证能滚动触发悬浮窗 */
main {
  min-height: 110vh;     /* 内容少时也能滚动 */
  padding-bottom: 5rem;  /* 和页脚拉开距离 */
}

/*head*/
.hero {
  background:
    radial-gradient(1200px 400px at 10% -20%, rgba(255,130,0,.15), transparent),
    radial-gradient(800px 300px at 90% 0%, rgba(0,120,255,.12), transparent);
  padding: 2.5rem 1rem;
  border-bottom: 1px solid #ddd;
}

/* 结果列表容器：卡片间距 */
#dyResults { gap: 12px; display: flex; flex-direction: column; }

/* 单条卡片 */
.dy-item {
  border: 1px solid #eaeaea;
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dy-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

/* 缩略图：16:9 比例盒 */
.dy-thumb-wrap {
  position: relative; width: 160px; max-width: 32vw;
  aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #f5f5f5;
}
.dy-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 文本区 */
.dy-title {
  font-weight: 600; font-size: 1rem; margin: 2px 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dy-meta { color:#666; font-size: .9rem; }

/* 按钮组更紧凑 */
.dy-actions .btn { padding: .35rem .7rem; border-radius: 18px; font-size:.85rem; }

/* 响应式：小屏改为上下堆叠 */
@media (max-width: 768px) {
  .dy-row { flex-direction: column; align-items: stretch; }
  .dy-thumb-wrap { width: 100%; max-width: 100%; }
}

/* “加载中”小圆点动画（可替换原 alert 文本） */
.dy-loading-dots { display:inline-block; }
.dy-loading-dots::after {
  content: "…"; animation: dyDots 1.2s infinite steps(4,start);
}
@keyframes dyDots { 0% {content:""} 25% {content:"."} 50% {content:".."} 75% {content:"..."} 100% {content:""} }

/* 空状态 */
.dy-empty {
  text-align:center; padding: 24px; border:1px dashed #ddd; border-radius:12px; color:#777; background:#fafafa;
}


/* 浅橙色按钮 */
.btn-soft-orange {
  background-color: rgba(255, 165, 0, 0.4); /* 橙色 + 40% 透明 */
  color: #fff;
  border: none;
  transition: all 0.2s ease-in-out;
}
.btn-soft-orange:hover {
  background-color: rgba(255, 165, 0, 0.7); /* 悬停时更深 */
  color: #fff;
}

/* 浅蓝色按钮 */
.btn-soft-blue {
  background-color: rgba(0, 123, 255, 0.35); /* 浅蓝色 + 半透明 */
  color: #fff;
  border: none;
  transition: all 0.2s ease-in-out;
}
.btn-soft-blue:hover {
  background-color: rgba(0, 123, 255, 0.6); /* 悬停时加深 */
  color: #fff;
}

/* 保证按钮圆润一些 */
.btn-soft-orange,
.btn-soft-blue {
  border-radius: 20px;
  padding: 0.4rem 1rem;
  font-weight: 500;
}

